<!--351-->
<template>
   <div>
    <a-space class="common-button-group">
      <a-button
        type="primary"
        :loading="searchBtnLoading"
        @click="getDataList('search')"
        >{{ $t("T9_search") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
    >
      <a-row  wrap=false type="flex">
        <a-col :span="6" >
          <a-form-item :label="$t('T9_type')" name="type" prop="type">
            <a-select
              v-model:value="queryForm.shopId"
              show-search
              allow-clear
              @change="changeType"
            >
              <a-select-option
                v-for="item in typeArr"
                :key="item.index"
                :value="item"
              >
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productId')" name="productId" prop="productId">
            <a-select
              v-model:value="queryForm.productId"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in productIdArr"
                :key="item.index"
                :value="item.productId"
              >
                {{ item.productId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_palletId')" name="palletId" prop="palletId">
            <a-input v-model:value="queryForm.palletId" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_owner')" name="owner" prop="owner">
            <a-select
              v-model:value="queryForm.owner"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in ownerArr"
                :key="item.index"
                :value="item"
              >
                {{ item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_grade')" name="grade" prop="grade">
            <a-select
              v-model:value="queryForm.grade"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in gradeArr"
                :key="item.index"
                :value="item"
              >
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_palletList")
      }}</a-col>
      <a-col :span="6" class="global-oper-row-extra">
        <a-button type="primary" @click="getDataList('export')">{{
          $t("T9_toExcel")
        }}</a-button>
      </a-col>
    </a-row>
    <div class="tableArea">
      <t-table :data="table.data" max-height="100%">
        <t-column type="checkbox" title="Select" v-model:checked="checkedList" min-width="60" />
        <t-column field="palletId" :title="$t('T9_palletId')" min-width="100" />
        <t-column field="productId" :title="$t('T9_productId')" min-width="100"/>
        <t-column field="owner" :title="$t('T9_owner')" min-width="100" />
        <t-column field="grade" :title="$t('T9_grade')" min-width="100"/>
        <t-column field="boxQty" :title="$t('T9_boxQty')" min-width="100"/>
        <t-column field="panelQty" :title="$t('T9_panelQty')" min-width="100"/>
        <t-column field="capacity" :title="$t('T9_capacity')" min-width="100" />
        <t-column field="greatTime" :title="$t('T9_greatTime')" min-width="100"/>
        <t-column field="receiveFlag" :title="$t('T9_receiveFlag')" min-width="100"/>
        <t-column field="shipTimeKey" :title="$t('T9_shipTimeKey')" min-width="100" />
      </t-table>
    </div>
    <t-query-form
      layout="inline"
      ref="dataForm"
      :rules="rules"
      :model="dataForm"
    >
      <a-row style="padding: 8px">
        <a-col :span="19">
          <a-form-item class="textAreaForm" :label="$t('T9_comment')" name="comment" prop="comment">
            <a-textarea
              type="textArea"
              rows="1"
              v-model:value="dataForm.comment"
              :title="dataForm.comment"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col
          :span="5"
          style="display: flex; align-items: center; justify-content: flex-end"
        >
          <a-button type="primary" @click="showConfirm">{{
            $t("T9_confirm")
          }}</a-button>
        </a-col>
      </a-row>
    </t-query-form>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'UnShipPallet',
    components: {},
    data() {
      return {
        table: {
          list: []
        },
        checkedList: false,
        typeArr: ['Unship', 'CrossUnship'],
        // 数据来源 QUERYID = GetProductSpecList   VERSION = 80012
        productIdArr: [{ productId: 1 }, { productId: 2 }, { productId: 3 }],
        // 数据来源：为新加模块，参考GetProcessGroupList   VERSION = 80035 Owner字段 ，或自定义SQL
        ownerArr: [1, 2, 3, 4, 5],
        // 数据来源：为新加模块，参考GetProcessGroupList   VERSION = 80035 Grade字段，或自定义SQL
        gradeArr: ['S', 'P', 'Q', 'F'],
        queryForm: {
          type: '',
          productId: '',
          palletId: '',
          owner: '',
          grade: ''
        },
        dataForm: {
          comment: '123'
        },
        rules: {
          type: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'blur'
            }
          ],
          comment: [
            {
              required: true,
              message: this.$t('T9_comment'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {},
    created() {},
    watch: {},
    methods: {}
  })
</script>
<style lang='less' scoped>
.tableArea {
  width: 100%;
  height: 38vh;
  padding-bottom: 8px;
}
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
.textAreaForm {
  /deep/ .ant-input {
    // width: auto!important;
    height: 32px;
  }
}
</style>
